<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>uupaa-color.js - hue</title>
<style type="text/css">@import url(../README.css);</style>
<script type="text/javascript" src="http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-detect.js/uupaa-detect.mini.js"></script>
<script type="text/javascript" src="../uupaa-color.js"></script>
<style type="text/css">
html, body {
  margin: 0; padding: 0;
  text-shadow: 3px 3px 5px red;
  font-size: small;
}
table { border: 3px outset gray; }
td { width: 15px; height: 15px; }
</style>
</head>
<body>
step1. Select Mode:
<input type="button" value="HSL" onclick="HSL()" />
<input type="button" value="HSV" onclick="HSV()" />
<input type="button" value="Gray" onclick="Gray()" />
<input type="button" value="Sepia" onclick="Sepia()" />
<input type="button" value="Complementary" onclick="Comp()" />
<hr />
<!--
step2. Draw Color:
<input type="button" value="Red(h=0)" onclick="draw({ h:  0, s: 100, v: 100, l: 50, a: 1 })" />
<input type="button" value="Orange(h=30)" onclick="draw({ h: 30, s: 100, v: 100, l: 50, a: 1 })" />
<input type="button" value="Yellow(h=60)" onclick="draw({ h: 60, s: 100, v: 100, l: 50, a: 1 })" />
<input type="button" value="Yellow-Green(h=90)" onclick="draw({ h: 90, s: 100, v: 100, l: 50, a: 1 })" />
<input type="button" value="Green(h=120)" onclick="draw({ h: 120, s: 100, v: 100, l: 50, a: 1 })" />
<input type="button" value="Green-Cyan(h=150)" onclick="draw({ h: 150, s: 100, v: 100, l: 50, a: 1 })" />
<br />
<input type="button" value="Cyan(h=180)" onclick="draw({ h: 180, s: 100, v: 100, l: 50, a: 1 })" />
<input type="button" value="Cyan-Blue(h=210)" onclick="draw({ h: 210, s: 100, v: 100, l: 50, a: 1 })" />
<input type="button" value="Blue(h=240)" onclick="draw({ h: 240, s: 100, v: 100, l: 50, a: 1 })" />
<input type="button" value="Blue-Magenta(h=270)" onclick="draw({ h: 270, s: 100, v: 100, l: 50, a: 1 })" />
<input type="button" value="Magenta(h=300)" onclick="draw({ h: 300, s: 100, v: 100, l: 50, a: 1 })" />
<input type="button" value="Magenta-Red(h=330)" onclick="draw({ h: 330, s: 100, v: 100, l: 50, a: 1 })" />
 -->
step2. Select Hue:
<input type="button" value="0" onclick="draw({ h:  0, s: 100, v: 100, l: 50, a: 1 })" />
<input type="button" value="30" onclick="draw({ h: 30, s: 100, v: 100, l: 50, a: 1 })" />
<input type="button" value="60" onclick="draw({ h: 60, s: 100, v: 100, l: 50, a: 1 })" />
<input type="button" value="90" onclick="draw({ h: 90, s: 100, v: 100, l: 50, a: 1 })" />
<input type="button" value="120" onclick="draw({ h: 120, s: 100, v: 100, l: 50, a: 1 })" />
<input type="button" value="150" onclick="draw({ h: 150, s: 100, v: 100, l: 50, a: 1 })" />
<input type="button" value="180" onclick="draw({ h: 180, s: 100, v: 100, l: 50, a: 1 })" />
<input type="button" value="210" onclick="draw({ h: 210, s: 100, v: 100, l: 50, a: 1 })" />
<input type="button" value="240" onclick="draw({ h: 240, s: 100, v: 100, l: 50, a: 1 })" />
<input type="button" value="270" onclick="draw({ h: 270, s: 100, v: 100, l: 50, a: 1 })" />
<input type="button" value="300" onclick="draw({ h: 300, s: 100, v: 100, l: 50, a: 1 })" />
<input type="button" value="330" onclick="draw({ h: 330, s: 100, v: 100, l: 50, a: 1 })" />

<hr />
<div id="result"></div>
<script>
var colortype = "HSV";
var colormethod = "hex";

function substance(html, context) {
  var _doc = document;
  var r, rv, ph;
  if (_doc.implementation && _doc.implementation.hasFeature("Range", "2.0")) {
    r = _doc.createRange();
    r.selectNode(context);
    return r.createContextualFragment(html);
  }
  rv = _doc.createDocumentFragment();
  ph = _doc.createElement("div"); // placeholder
  ph.innerHTML = html;
  while (ph.firstChild) {
    rv.appendChild(ph.removeChild(ph.firstChild));
  }
  return rv;
}
var table =
'<table>'+
'<tr><td id="id00"></td><td id="id01"></td><td id="id02"></td><td id="id03"></td><td id="id04"></td></tr>'+
'<tr><td id="id10"></td><td id="id11"></td><td id="id12"></td><td id="id13"></td><td id="id14"></td></tr>'+
'<tr><td id="id20"></td><td id="id21"></td><td id="id22"></td><td id="id23"></td><td id="id24"></td></tr>'+
'<tr><td id="id30"></td><td id="id31"></td><td id="id32"></td><td id="id33"></td><td id="id34"></td></tr>'+
'<tr><td id="id40"></td><td id="id41"></td><td id="id42"></td><td id="id43"></td><td id="id44"></td></tr>'+
'<tr><td id="id50"></td><td id="id51"></td><td id="id52"></td><td id="id53"></td><td id="id54"></td></tr>'+
'<tr><td id="id60"></td><td id="id61"></td><td id="id62"></td><td id="id63"></td><td id="id64"></td></tr>'+
'<tr><td id="id70"></td><td id="id71"></td><td id="id72"></td><td id="id73"></td><td id="id74"></td></tr>'+
'<tr><td id="id80"></td><td id="id81"></td><td id="id82"></td><td id="id83"></td><td id="id84"></td></tr>'+
'<tr><td id="id90"></td><td id="id91"></td><td id="id92"></td><td id="id93"></td><td id="id94"></td></tr>'+
'</table>';
function draw(hash) {
  var r = document.getElementById("result");
  var node = substance(table, r);
  r.innerHTML = "";
  r.appendChild(node);

  var y = 0, yz = 10, x = 0, xz = 5;
  var _doc = document;
  var e;
  var sary = [100, 75, 50, 25, 0];
  var vary = [100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0];
  var bg;
  for (; y < yz; ++y) {
    for (x = 0; x < xz; ++x) {
      e = _doc.getElementById("id" + y + x);
      if (colortype === "HSL") {
        bg = uu.color({ h: hash.h, s: sary[x], l: vary[y], a: 1.0 })[colormethod]();
      } else {
        bg = uu.color({ h: hash.h, s: sary[x], v: vary[y], a: 1.0 })[colormethod]();
      }
      e.style.backgroundColor = bg.toString();
    }
  }
}
function HSL() { colortype = 'HSL'; colormethod = 'hex'; }
function HSV() { colortype = 'HSV'; colormethod = 'hex'; }
function Gray() { colortype = 'Gray'; colormethod = 'gray'; }
function Sepia() { colortype = 'Sepia'; colormethod = 'sepia'; }
function Comp() { colortype = 'Complementary'; colormethod = 'complementary'; }
</script>
</body>
</html>